<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tab事件</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
</head>

<body>
    <span style='font-size:20px;font-weight:bold;'>Modal功能</span>
    <p/>
    <p/>
    <button id="btn1" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">Tab 切换选项卡</button>
    <p/>
    <button id="btn2" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">Modal2 tab页签iframe加载完成后显示Modal</button>
    <p/>
</body>
<script>
    var iftexturl = function(){return "http://www.jq22.com/"}
    var Modal2;//tab页签iframe加载完成后显示Modal
    var tab2;
    $(document).ready(function () {
        InitTab1();//modal嵌入页签
        InitModal2();//tab页签iframe加载完成后显示Modal
        var tab1 =  bsEx.ui.tab1;
        //显示
        $("#btn1").click(function () {
            if(!tab1.isactive("tabs1")){
                tab1.show(0);
            }else{
                tab1.show(1);
            }
        });
        tab1.on('active',function(t,tabs){
            alert('触发切换事件：切换到'+tabs.title)
        })
        tab1.on('hidden',function(t,tabs){
            alert('触发关闭事件');
        })
        //显示
        $("#btn2").click(function () {
            //Modal2.show();
            tab2.tabs[0].iframe.attr("src", iftexturl());
        })
    });

    //事件另一种写法
    function tab1_onactive(t,tabs){
      //alert('测试触发切换事件：切换到'+tabs.title)
    }

    //modal嵌入页签
    function InitTab1() {
        $(document.body).append('<div id="tab1" style="width:75%;height:300px;"></div>');
        new bsEx.Tab({
            id:"tab1",
            tabs:[{
                    id: "tabs1", title: "Baidu页面", active: true, isiframe: true, url: iftexturl()
                }, {
                    id: "tabs2", title: '其他信息', bodyel: "其他信息XXX，由于gitee只显示静态页面，所以百度会打不开"
                }, {
                    id: "tabs3", title: '触发关闭事件', bodyel: "其他信息XXX，由于gitee只显示静态页面，所以百度会打不开",showclosebtn:true
                }],
            renderto:"#tab1"
        }).init();
        //tab1;
    }

    
    //最大化窗口 添加按钮
    function InitModal2() {
        $(document.body).append('<div id="modal2"></div>');
        tab2 = new bsEx.Tab();
        //另一种绘制方法
        Modal2 = new bsEx.Modal({
            renderto:"#modal2",//绘制到div
            btns:[{ id: "btn_save", text: "保存" }, { id: "closebtn" }],//按钮组
            initMax:true,//初始是否最大化
            oninited:function (thismodal) {//绘制完成后事件
                tab2.tabs = [{
                    id: "tabs5", title: "Baidu页面", active: true, isiframe: true,// url: iftexturl(),
                    onifloaded:function(){
                        thismodal.show();
                    }
                }, {
                    id: "tabs4", title: '其他信息', bodyel: "其他信息XXX，由于gitee只显示静态页面，所以百度会打不开"
                }];
                tab2.renderto = thismodal.bodyel;
                tab2.init();
            }
        }).init();
    }
</script>
</html>